<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <thead>
        <tr>
            <th>编号</th>
            <th>型号</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="site in sites">
            <td v-text="site.id"></td>
            <td v-text="site.cupSize"></td>
            <td v-text="site.age"></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            sites: []
        },
        created: function () {
            //为了在内部函数能使用外部函数的this对象，要给它赋值了一个名叫self的变量。
            var self = this;
            $.ajax({
                url: 'http://localhost:8080/jsonGirls',
                type: 'post',
                data: {},
                dataType: 'json'
            }).then(function (res) {
                console.log(res);
                //把从json获取的数据赋值给数组
                self.sites = res;
            }).fail(function () {
                console.log('失败');
            })
        }
    })
</script>
</html>